<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<%-- <base href="${pageContext.request.contextPath }/"> --%>
<link rel="stylesheet" href="layui/css/layui.css">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<style type="text/css">
	.xiaoge-bg{
		width:98%;
		margin-left:1%;
		border: 0px solid red;
		position:absolute;
	}
	
	.xiaoge-top{
		width:100%;
		height: 90px;
		position:relative;
		border:0px solid green;
	}
	.xiaoge-top-top{
		width:100%;
		height: 40px;
		border:0px solid green;
	}
	.xiaoge-top-top-font{
		line-height: 40px;
		font-size: 14px;
		border:0px solid red;
	}
	
	.xiaoge-bottom{
		width:100%;
		height: 50px;
		position:relative;
		border:0px solid red;
	}
	.xiaoge-bottom-content{
		width:100%;
		height: 40px;
		position:relative;
		margin-top:5px;
		background-color:#EEE;
		border:1px solid #EEE;
	}
	.xiaoge-fleft{
		float: left;
		height: 40px;
		margin-left:5px;
		line-height:40px;
		width: 120px;
	}
	.xiaoge-fRight{
		float: right;
		height: 40px;
		margin-left:5px;
		line-height:40px;
		width: 120px;
	}
	.top-title{
		height: 40px;
		width: 100%;
		line-height: 38px;
	}
	.top-title-p-font{
		color: #FF8800;
		font-family: '华文行楷';
		font-size: 28px;
	}
</style>
</head>
<body>
	<div class="xiaoge-bg">
		<div class="xiaoge-top">
			<div class="xiaoge-bottom">
				<div class="xiaoge-bottom-content">
					<div class="xiaoge-fleft">
						<button class="layui-btn layui-btn-primary layui-btn-xs" style="height: 30px;width: 50px;" id="add">新增</button>
					</div>
					<div class="xiaoge-fRight">
						
					</div>
				</div>
			</div>
		</div>
		<div class="layui-input-inline" style="margin-left: 0px">
		 <input lay-verify="required" autocomplete="off" id="subName" placeholder="输入客户关键"  class="layui-input" style="width: 160px;" type="text" />
		 </div>
		 <div class="layui-input-inline">
	        <button class="layui-btn layui-btn-normal" id="btnQuery">查  询</button>
	        <button class="layui-btn layui-btn-danger" id="btnAdd">添  加</button>
	      </div>
		<table class="layui-hide" style="opacity:0.5;" width="100%" border="1" bordercolor="gray" cellspacing="0" cellpadding="3" id="subInfo" lay-filter="userDemo"></table>
		<script  type="text/javascript" id="barDemo">
             <a class="layui-btn layui-btn-xs" title="修改" lay-event="edit">查看</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" title="删除" lay-event="del">删除</a>
		</script>
	</div>
</body>
<script type="text/javascript" src="layui/layui.js" ></script>

<script type="text/javascript" id="ZT">
		{{# if(d.subStatic=='0'){d.subStatic='未维修'}}
		<div>{{d.subStatic}}</div>
		{{# }else if(d.subStatic=='1'){d.subStatic='已维修'}}
		<div>{{d.subStatic}}</div>
		{{#} else {d.subStatic="失败"}}
		<div>{{d.ItvTtate}}</div>
		{{#}}}
</script>
<script type="text/javascript">
	layui.use(['laypage', 'layer', 'table'], function(){
		 layer = layui.layer //弹层
		,laypage = layui.laypage //分页
		,table = layui.table //表格
		,$ = layui.$ //$是jquery对象
		
		 table.render({
		    elem: '#subInfo'
		    ,method:'post' //post请求
		    ,height: 620
		    ,opacity:0.5
		    ,url: 'creatImgCode!queryAllw.action' //数据接口
		    ,page: true //开启分页
		    ,limit:11 //默认每页数据数
		    ,limits:[5,10,15,20,25] //分页列表
		    ,cols: [[ //表头
		       {field: 'subId',title:'ID',align:'center',width:'10%',sort: true, fixed: 'left'}
		      ,{field: 'subName',width:'10%', title:'客户',align:'center'}/*,templet:'<div>{{d.typeId.typeName}}</div>'  */
		      ,{field: 'subSex',width:'6%', title:'性别',align:'center'}
		      ,{field: 'subLicense_plate',width:'10%', title:'车牌号',align:'center'}
		      ,{field: 'subModel',width:'10%', title:'车型',align:'center'}
		      ,{field: 'subPhone',width:'10%', title:'电话',align:'center'}
		      ,{field: 'subTime',width:'10%', title:'时间',align:'center'}
		      ,{field: 'subStatic',width:'10%', title:'维修状态',templet:'#ZT',align:'center'}//维修状态
		      ,{field: 'sunService_type',width:'9%', title:'维修类型',align:'center'}
		      ,{fixed: 'right', title:'操作',width:'14%', align:'center', toolbar: '#barDemo'}
		    ]]
		 }); 
		//添加文档类别
		 $("#add").click(function(){
			 layer.open({
		         type: 2 //此处以iframe举例
		        ,title:'添加文档标题'
		        ,area: ['950px', '700px']
		        ,shade: 0.3 //遮罩0-1
		        ,maxmin: false //最大化最小化
		        ,content: "online.com?op=QueryAllElementTypeToAddElementTitle"
		        ,zIndex: layer.zIndex //重点1
	   		});   
		 });
		//监听工具条
		 table.on('tool(userDemo)',function(obj){
			
			 var data = obj.data//获取当前行数据
			 ,layEvent = obj.event;//获取事件名
			 if(layEvent=='edit'){//**************************修改
			
				  layer.open({
			         type: 2 //此处以iframe举例
			        ,title: '预约查看'
			        ,area: ['500px', '400px']
			        ,shade: 0.3 //遮罩0-1
			        ,maxmin: false //最大化最小化
			        ,content: "creatImgCode!queryById.action?s=0&id="+data.subId
			        ,zIndex: layer.zIndex //重点1
		   		});
				  
			 }else if(layEvent=='del'){//*************************删除
				 
				 var titleId = data.titleId;
					
				 layer.confirm("你确定要删除编号为"+titleId+"的在条数据吗？",function(index){
					
					 $.post("online.com",{"op":"DeleteElementTitleFromTitleId","titleId":titleId},function(data){
						 
						 if(data==1){
							 layer.msg('删除成功！', {time: 3000 },{});
							 obj.del();
							//加载list页面数据
						 	window.parent.layui.table.reload('UserInfo');
							
						 }else{
							 if(data==-1){
									
								 layer.msg('该标题中还存在知识点，请先删除对应知识点。。。', {time: 2000 },function(){});
							}else{
								layer.msg('sorry,异常了。。。', {time: 2000 },function(){
					    			window.parent.layui.table.reload('UserInfo');
					    			closeThis();
					    		});
							}
						}
					});
					 
					 layer.close(index);
				 });
			 }
		 });
		//按钮单击事件
		 $('#btnQuery').click(function(){
			 //获取文本输入框的值
			 var deptName = $('#subName').val();
			 //var sel=$('#sl').val();//获取
			 
			 //重新加载表格数据        dept：页面表格的id
			 layui.table.reload('subInfo',{
				 where:{subName:deptName} //额外的查询条件
				 ,page:{curr:1} //重第一页重新加载
			 })
		 });
	});
</script>
</html>